<template>
  <div class="student">
    <el-card>
      <!-- 搜索 -->
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="用户名：">
            <el-input v-model="name" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="success">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="Id" width="180" />
        <el-table-column prop="realName" label="用户名" width="180" />
        <el-table-column prop="realName" label="真实姓名" />
        <el-table-column prop="address" label="性别" />
        <el-table-column prop="address" label="手机号" />
        <el-table-column prop="address" label="创建时间" />  
        <el-table-column prop="address" label="状态" />  
 <el-table-column label="操作" width="350">
          <template #default="scope">
            <el-button>禁用</el-button>
            <el-button>编辑</el-button>
            <el-button>日志</el-button>
            <el-button type="danger" @click="delete1(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>      
      </el-table>

      <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="400"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

    </el-card>
  </div>
</template>

<script setup lang="ts">
import UserAPI, { type UserParams, type UserType } from "@/api/system/user.api"

import { ref } from "vue"
let name = ref("")

const tableData = ref<UserType[]>([])
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
// 接口参数
let params = ref<UserParams>({
  userName: "",
  role: 3,
  pageIndex: 1,
  pageSize: 10
})
// 获取列表
function getLIst() {
  UserAPI.getUserPage(params.value).then(data => {
    console.log(data);
    tableData.value = data.list
  })
}
onMounted(async () => {
  getLIst()
})
function delete1(val:number){

}
</script>

<style scoped lang="scss">
.student {
  padding: 16px;
}
</style>